<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="info-top">
			<image class="bg" src="http://chuantu.xyz/t6/703/1573030703x1033347913.jpg"></image>
			<view class="top-img" v-if="img !== null">
				<image class="i-img" :src="img" mode=""></image>
			</view>
			<view class="top-img" v-if="img === null">
				<image class="i-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568112289970&di=422c0b2702c4e2f6472c94dc1e73b411&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F05643ca6c15b801806ff375863ad0c38ce2ab990381a-n5PHBM_fw658"
				 mode=""></image>
			</view>
			<view class="top-text">
				<text class="text-o">{{shop.shop_name}}</text>
				<text class="text-dp">{{shop.shop_desc}}</text>
			</view>
		</view>
        <scroll-view
        style="height: 1100upx;background-color: #fcfcfc;"
        	class="list-scroll-content " 
        	scroll-y
        
         >
       <view class="goods" v-for="(item,index) in goods" :key="index">
            <image :src="item.cover_img" mode=""></image>
            <view style="flex: 1;">
                <view>{{item.title}}</view>
                <view class="describe">{{item.desc}}</view>
                <view class="money">价格：{{item.goods_price}} 可抵扣购物积分：{{item.goods_coin}}</view>
            </view>
             <button plain="true" type="primary" open-type="share" :data-item="item" class="buttom" >分享</button>
            <button v-if="item.status ==='hide' " type="primary" class="buttom" @click="updatecheck(index,'show')">上架</button>
             <button v-if="item.status ==='show' " type="primary" class="buttom" @click="updatecheck(index,'hide')">下架</button>
       </view>
        
        <uni-load-more :status="loadingType"></uni-load-more>
       </scroll-view>=
  
  
   </button>
	</view>
</template>

<script>
    	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from '../../ed-icons/ed-icons.vue'
	import {
		getOne,
		putOne
	} from '../../api/publicapi.js'

	export default {
		components: {
			uniIcons,
            uniLoadMore
		},
		data() {
			return {
				shopid: [],
				goods: [],
				shop: [],
				page: 1,
				img: [],
				show: true,
				state: {
					set: false,
				},
                loadingType:'more',
                page:1
			};
		},
		// async onLoad(options) {
		// 	// console.log(options.id)
		// 	this.shopid = options.id
		// },
		onShow() {
			this.getshop()
			this.getgoods()
		},
		methods: {
			// 店铺信息
			getshop() {
				getOne('front/storeapply/getstore').then(res => {
					// 店铺信息
					this.shop = res.data.tenant
                    console.log(this.shop)
					this.img = res.data.user.avatar
                    
				})
			},

			// 店铺商品
			getgoods() {
                 if(this.loadingType === 'loading' || this.loadingType === 'noMore' ){
                    //防止重复加载
                    return;
                }
                        
                
                this.loadingType = 'loading';
				getOne('front/storeapply/getsmallshop').then(res => {
					let list = res.data
                      if(list.length>0){
                          this.page += 1
                          for (var i = 0; i < list.length; i++) {
                              list [i].checked =false
                             this.goods.push(list [i]) 
                          }
                        
                      }
                      
                      
                      if(res.per_page*res.last_page < res.total){
                          this.loadingType = 'more'
                      }else{
                            this.loadingType = 'noMore';
                      }
				})
			},

			// 上架
			updatecheck(index, status) {
				// this.goodsindex = index
				this.items = this.goods[index].id
				let data = {
					'id': this.items,
					'status': status
				}
                let that =this
				putOne('front/storeapply/putshop', data).then(res => {
					if (data.status === 'show') {
							uni.showModal({
								content: '上架' + res.message,
								showCancel: false
							}).then(() => {
							
                           
						})
					} else {
							uni.showModal({
								content: '下架' + res.message,
								showCancel: false
							}).then(() => {
							
						})
					}
                     that.goods[index].status = status
				})
			},

			onShareAppMessage(res) {
				let that = this
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1].route;
				let title = '易度商城'+that.shop.shop_name
				let path = '/pages/myshop/myshop?id='+this.shop.id 
				console.log(path)
				if (res.from === 'button') { // 来自页面内分享按钮
				
                    let item = res.target.dataset.item
                    console.log(item)
                    return {
                    	title: that.shop.shop_desc,
                    	path: 'pages/product/product?id='+item.id,
                    	imageUrl: item.cover_img,
                    	desc:  item.title
                        
                    }
				}
				return {
					title: title,
					path: path,
					imageUrl: that.img,
					desc: that.shop.shop_desc
				}
			}
		},

	}
</script>

<style lang='scss'>
	/* 头部 */
	.info-top {
		background-image: '/static/user-bg.jpg';
		height: 146px;
		padding: 82upx 0 0 40upx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 300upx;
			filter: blur(1px);
			opacity: .7;
			z-index: -1;
		}

		.top-img {
			width: 160upx;
			float: left;
			padding-bottom: 50upx;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
			}
		}

		.top-text {
			padding-left: 25upx;
			float: left;
			width: 70%;

			.text-o {
				font-size: 40upx;
				display: block;
				padding-top: 6upx;
				padding-bottom: 12upx;
			}

			.text-dp {
				display: block;
				font-size: 30upx;
				color: #636363;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}

	}
    .goods{
    	display: flex;
    	flex-direction: row;
    	flex-wrap: nowrap;
    	justify-content: flex-start;
    	align-items: center;
    	align-content: center;
    	margin-bottom: 10rpx;
    	padding: 10px;
    	&>image{
    		width: 150rpx;
    		height: 150rpx;
    		margin-right: 16rpx;
    	}
    	
    	.describe{
    		font-size: 24rpx;
    		color: #999;
    	}
    	
    	.money{
    		font-size: 24rpx;
    		color: #E04B28;
    	}
        .buttom{
            width: 120rpx;
            height: 50rpx;
            background-color: rgba(255,255,255,0);
            font-size: 30rpx;
            line-height: 50rpx;
            color: #fa436a;
            border: 1px #fa436a solid;

        }
       
    }
 .sharebutton{
            position: fixed;
            bottom: 0px;
            width: 100%;
            color: #fa436a;
            border: 1px #fa436a solid;
        }

</style>
